<template>
  <view class="content">
    <view class="content-box">
      <u-image
        src="@/static/images/seat-bg.png"
        width="100%"
        mode="widthFix"
      ></u-image>
      <view class="set-box">
        <view v-for="(item, index) in dataSource" :key="index" class="set-row">
          <view class="left">
            <view
              :class="[
                item[0].isSeal ? 'disabled-set' : '',
                selectedSet.includes(item[0].number) ? 'selected-set' : '',
              ]"
              @click="chooseSet(item[0])"
              >{{ item[0].number }}</view
            >
            <view
              :class="[
                item[1].isSeal ? 'disabled-set' : '',
                selectedSet.includes(item[1].number) ? 'selected-set' : '',
              ]"
              @click="chooseSet(item[1])"
              >{{ item[1].number }}</view
            >
            <view
              :class="[
                item[2].isSeal ? 'disabled-set' : '',
                selectedSet.includes(item[2].number) ? 'selected-set' : '',
              ]"
              @click="chooseSet(item[2])"
              >{{ item[2].number }}</view
            >
          </view>
          <view class="right">
            <view
              :class="[
                item[3].isSeal ? 'disabled-set' : '',
                selectedSet.includes(item[3].number) ? 'selected-set' : '',
              ]"
              @click="chooseSet(item[3])"
              >{{ item[3].number }}</view
            >
            <view
              :class="[
                item[4].isSeal ? 'disabled-set' : '',
                selectedSet.includes(item[4].number) ? 'selected-set' : '',
              ]"
              @click="chooseSet(item[4])"
              >{{ item[4].number }}</view
            >
            <view
              :class="[
                item[5].isSeal ? 'disabled-set' : '',
                selectedSet.includes(item[5].number) ? 'selected-set' : '',
              ]"
              @click="chooseSet(item[5])"
              >{{ item[5].number }}</view
            >
          </view>
        </view>
      </view>
      <view class="note">
        <view class="note-item">
          <view class="box optional"></view>
          <text>可选座位</text>
        </view>
        <view class="note-item">
          <view class="box selected"></view>
          <text>已选座位</text>
        </view>
        <view class="note-item">
          <view class="box not-optional"></view>
          <text>已售座位</text>
        </view>
      </view>
    </view>
    <view class="movie-info">
      <view class="name">{{ movieName }}</view>
      <view class="detail"
        >{{ operaName }} · {{ date }} {{ day }} {{ time }}</view
      >
    </view>
    <view class="set-price">
      <view class="item">
        <view class="text">已选座位</view>
        <view class="set-box">
          <view class="set-item" v-for="item in selectedSet" :key="item">{{
            item
          }}</view>
        </view>
      </view>
      <view class="item">
        <view class="text">总价</view>
        <view class="total-price">￥ {{ price * selectedSet.length }}</view>
      </view>
    </view>
    <view class="btn" @click="orderConfirm">立即购票</view>
  </view>
</template>

<script lang="ts">
import PAGE from '@/const/page';
import { defineComponent, ref, reactive, toRefs } from '@vue/composition-api';
// eslint-disable-next-line @typescript-eslint/no-var-requires
const data = require('@/mock/set/index.json');
import dayjs from 'dayjs';
import { getDayByDate } from '@/utils/getDay';

export default defineComponent({
  onLoad(options) {
    this.movieName = options?.movieName || '';
    this.operaName = options?.operaName || '';
    this.date = options?.date || '';
    this.time = options?.time || '';
    this.price = options?.price || '';
    this.movieId = options?.movieId || '';
    this.getDay(this.date);
    this.dataSource = data.setList;
  },
  setup() {
    const dataSource = ref();
    const selectedSet = ref<string[]>([]);
    const state = reactive({
      movieId: '',
      movieName: '',
      operaName: '',
      date: '',
      day: '',
      time: '',
      price: 0,
    });
    return {
      dataSource,
      selectedSet,
      ...toRefs(state),
    };
  },
  methods: {
    chooseSet(item: any) {
      if (!item.isSeal) {
        const index = this.selectedSet.indexOf(item.number);
        if (index === -1) {
          if (this.selectedSet.length === 5) {
            uni.showToast({
              title: '一次性最多只能选5个座位',
              icon: 'none',
              duration: 1500,
            });
          } else {
            this.selectedSet.push(item.number);
          }
        } else {
          this.selectedSet.splice(index, 1);
        }
      }
    },
    getDay(date: string) {
      this.day = getDayByDate(date);
    },
    orderConfirm() {
      if (this.selectedSet.length <= 0) {
        uni.showToast({
          title: '请先选择座位',
          icon: 'none',
          duration: 1500,
        });
      } else {
        uni.navigateTo({
          url:
            PAGE.ORDER_CONFIRM.PATH +
            '?movieId=' +
            this.movieId +
            '&operaName=' +
            this.operaName +
            '&date=' +
            this.date +
            '&time=' +
            this.time +
            '&sets=' +
            this.selectedSet.join(','),
        });
      }
    },
  },
});
</script>

<style lang="scss" scoped>
.content-box {
  width: 100%;
  height: 840rpx;
  background-image: url('@/static/images/chooseSeat.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 50rpx;

  .set-box {
    width: 100%;

    .set-row {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 32rpx;

      .left view,
      .right view {
        width: 86rpx;
        height: 52rpx;
        border: 4rpx solid #fff;
        text-align: center;
        line-height: 52rpx;
        font-weight: 700;
        margin-right: 16rpx;
        color: #fff;
        border-radius: 10rpx;
      }

      .left,
      .right {
        display: flex;
      }

      .disabled-set {
        background-color: #e3eeff;
        color: #000 !important;
        border: none !important;
      }

      .selected-set {
        background-color: #4074ff;
        border: none !important;
      }
    }
  }

  .note {
    display: flex;
    margin-top: 52rpx;

    .note-item {
      color: #e3eeff;
      height: 44rpx;
      margin-right: 32rpx;
      display: flex;
      align-items: center;

      text {
        line-height: 44rpx;
      }

      .box {
        width: 32rpx;
        height: 32rpx;
        border-radius: 8rpx;
        margin-right: 8rpx;
      }

      .optional {
        border: 4rpx solid #fff;
      }

      .selected {
        background-color: #4074ff;
      }

      .not-optional {
        background-color: #e3eeff;
      }
    }
  }
}

.movie-info {
  padding: 0rpx 50rpx;
  margin-top: 30rpx;
  .name {
    font-size: 32rpx;
    font-weight: 700;
  }

  .detail {
    font-size: 24rpx;
    padding: 16rpx 0rpx;
  }
}

.set-price {
  width: calc(100% - 100rpx);
  height: 130rpx;
  margin: 0rpx 50rpx;
  border: 1px solid #ccc;
  border-radius: 10rpx;
  display: flex;
  overflow: auto;

  .item {
    width: 50%;
    padding-left: 30rpx;

    .text {
      width: 100%;
      height: 66rpx;
      line-height: 66rpx;
      font-weight: 600;
    }

    .set-box {
      width: 100%;
      height: calc(100% - 66rpx);

      .set-item {
        display: inline-block;
        width: 44rpx;
        height: 44rpx;
        background-color: #4074ff;
        text-align: center;
        line-height: 44rpx;
        border-radius: 8rpx;
        margin-right: 10rpx;
        font-size: 24rpx;
        font-weight: 700;
        color: #fff;
        margin-bottom: 10rpx;
      }
    }

    .total-price {
      font-weight: 700;
      color: #4074ff;
    }
  }
}

.btn {
  width: calc(100% - 100rpx);
  height: 100rpx;
  margin: 20rpx 40rpx;
  background-color: $u-type-primary;
  border-radius: 14rpx;
  color: #fff;
  font-size: 32rpx;
  font-weight: 700;
  text-align: center;
  line-height: 100rpx;
  z-index: 2;
}
</style>
